<template>
  <div class="main">
    <div class="title">
      {{title}}
    </div>
    <div class="choice">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="平台：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>今日头条</el-radio>
              <el-radio label="2" border>百家号</el-radio>
              <el-radio label="2" border>东方头条</el-radio>
              <el-radio label="2" border>搜狐网</el-radio>
              <el-radio label="2" borde>新浪号</el-radio>
              <el-radio label="2" border>网易号</el-radio>
              <el-radio label="2" border>一点资讯</el-radio>
              <el-radio label="2" border>UC头条</el-radio>
              <el-radio label="2" border>腾讯号</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="行业分类：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>文化</el-radio>
              <el-radio label="2" border>历史</el-radio>
              <el-radio label="2" border>三农</el-radio>
              <el-radio label="2" border>财经</el-radio>
              <el-radio label="2" border>科技</el-radio>
              <el-radio label="2" border>体育</el-radio>
              <el-radio label="2" border>汽车</el-radio>
              <el-radio label="2" border>娱乐</el-radio>
              <el-radio label="2" border>时尚</el-radio>
              <el-radio label="2" border>健康</el-radio>
              <el-radio label="2" border>教育</el-radio>
              <el-radio label="2" border>母婴</el-radio>
              <el-radio label="2" border>美食</el-radio>
              <el-radio label="2" border>旅游</el-radio>
              <el-radio label="2" border>公益</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="地区：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>综合全国</el-radio>
              <el-radio label="2" border>北京</el-radio>
              <el-radio label="2" border>天津</el-radio>
              <el-radio label="2" border>上海</el-radio>
              <el-radio label="2" border>重庆</el-radio>
              <el-radio label="2" border>河北</el-radio>
              <el-radio label="2" border>山西</el-radio>
              <el-radio label="2" border>辽宁</el-radio>
              <el-radio label="2" border>吉林</el-radio>
              <el-radio label="2" border>黑龙江</el-radio>
              <el-radio label="2" border>江苏</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="账号认证：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>已认证</el-radio>
              <el-radio label="2" border>未认证</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="参考粉丝数：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>0-1000</el-radio>
              <el-radio label="2" border>1001-5000</el-radio>
              <el-radio label="2" border>5001-1万</el-radio>
              <el-radio label="2" border>1万-5万</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="参考阅读数:">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>0-1000</el-radio>
              <el-radio label="2" border>1001-5000</el-radio>
              <el-radio label="2" border>5001-1万</el-radio>
              <el-radio label="2" border>1万-5万</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="价格筛选：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>0-50</el-radio>
              <el-radio label="2" border>51-200</el-radio>
              <el-radio label="2" border>201-500</el-radio>
              <el-radio label="2" border>501-1000</el-radio>
              <el-radio label="2" border>1001-2000</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="一手认证：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>所有</el-radio>
              <el-radio label="2" border>已认证</el-radio>
              <el-radio label="2" border>未认证</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="可发视频：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>可发视频</el-radio>
              <el-radio label="2" border>不可发视频</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="周末可发：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>周末可发</el-radio>
              <el-radio label="2" border>周末不可发</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="官方自媒体：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>官方自媒体</el-radio>
              <el-radio label="2" border>非官方自媒体</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="排序：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>默认</el-radio>
              <el-radio label="2" border>价格</el-radio>
              <el-radio label="2" border>可发条数</el-radio>
              <el-radio label="2" border>出稿时间</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="100px">
          <el-radio-group v-model="form.radio2" size="medium" class="botradio">
            <el-radio-button label="1" >全部媒体</el-radio-button>
            <el-radio-button label="2">今日推荐</el-radio-button>
            <el-radio-button label="3">今日新增</el-radio-button>
            <el-radio-button label="4">收藏夹</el-radio-button>
            <el-radio-button label="5">小黑屋</el-radio-button>
          </el-radio-group>
          <el-button type="primary" plain  size="medium" class="excel excel2">自媒体入驻</el-button>
          <el-button type="primary"  size="medium" class="excel">导出Excel</el-button>
          <el-form-item label="搜索媒体：" class="mname">
              <el-input v-model="form.input" placeholder="请输入要搜索的媒体名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table_bottom">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="classification"
          label="行业分类"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="platform"
          label="平台"
          header-align="center"
          align="center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="attestation"
          label="一手认证"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="agentPrice"
          label="代理商价格"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="平均出稿时间"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="fans"
          label="参考粉丝数 "
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="read"
          label="参考阅读数 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="number"
          label="可发条数 "
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注 "
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="collection"
          label="收藏 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="pullBlack"
          label="拉黑 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  props: [
    'title'
  ],
  data () {
    return {
      form: {
        radio1: '1',
        radio2:"1",
        input:""
      },
      tableData:[{
        classification:"时尚",
        name:"瓜美媒",
        platform:"今日头条",
        attestation:"",
        price:"8",
        agentPrice:"5",
        time:"一小时",
        fans:"2000",
        read:"2000",
        number:"不限",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心",
        pullBlack:"黑"
      },
      {
        classification:"时尚",
        name:"瓜美媒",
        platform:"今日头条",
        attestation:"",
        price:"8",
        agentPrice:"5",
        time:"一小时",
        fans:"2000",
        read:"2000",
        number:"不限",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心",
        pullBlack:"黑"
      },
      {
        classification:"新闻",
        name:"瓜美媒",
        platform:"今日头条",
        attestation:"",
        price:"8",
        agentPrice:"5",
        time:"一小时",
        fans:"2000",
        read:"2000",
        number:"8",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心",
        pullBlack:"黑"
      },
      {
        classification:"娱乐",
        name:"瓜美媒",
        platform:"今日头条",
        attestation:"",
        price:"8",
        agentPrice:"5",
        time:"一小时",
        fans:"2000",
        read:"2000",
        number:"5",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心",
        pullBlack:"黑"
      },
      {
        classification:"健康",
        name:"瓜美媒",
        platform:"今日头条",
        attestation:"",
        price:"8",
        agentPrice:"5",
        time:"一小时",
        fans:"2000",
        read:"2000",
        number:"不限",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心",
        pullBlack:"黑"
      }]

    };
  },
  methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}
</script>

<style lang="scss" scoped>
.main{
  min-height: 755px;
  min-width: 1000px;
}
.botradio{
  float:left;
}
.excel{
  float: left;
}
.excel2{
  margin-left: 86px;
}
.table_bottom{
  margin-bottom: 86px;
}
.seamless-warp2 {
  overflow: hidden;
  height: 33px;
  width: 380px;
  float: left;
  margin: 0 20px;
  border:1px solid #dedfe6;
  color: #ff7b00;
  ul.item {
    width: 1300px;
    li {
        float: left;
        margin-right: 20px;
        list-style:none;
        margin-top: -8px;
    }
  }
}
.title {
    color: #F37B1D;
    font-weight: 700;
    padding-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px #dedede solid;
}
.mname{
  width: 310px;
  float: left;
}
.choice{
  margin-top: 18px;
  .el-radio{
    margin:0 8px 8px 0;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left:0;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
}
#footer_box {
    z-index: 999;
    position: fixed;
    left: 243px;
    bottom: 0;
    height: auto;
    border-top: 1px solid #26A7E0;
    padding: 10px;
    background: #4795C5;
    color: #fff;
    width: 100%;
    font-size: 14px;
    padding-top: 27px;
    margin-left: 6px;
    padding-left: 441px;
    .am-btn-group,
    .am-btn-group-stacked {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .el-button--primary {
        background: #ea6e0c;
        margin-left: 11px;
    }
}
</style>
